<template>
	<div class="horselight">
		<el-col :span="3" class="horselight-el-col">

			<el-menu :default-active="dVal" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose"
			@select="navSelect" :default-openeds="openeds" router>

			<!-- :default-openeds="openeds" -->
			<!-- <el-menu :default-active="dVal" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose"
			@select="navSelect"  router> -->

				<el-menu-item index="1" :route="navList[0].path">
					<i class="el-icon-menu"></i>
					<span slot="title">{{navList[0].navName}}</span>
				</el-menu-item>
				<el-submenu :index="String(i+2)" v-for="(item,i) in iVal=='medium'?mediumList.slice(1):navList.slice(1)" :key="item.id">
					<template slot="title">
						<i :class="item.iconFont"></i>
						<span>{{item.navName}}</span>
					</template>
					<el-menu-item v-for="(secNav,t) in item.secondNav" :key="secNav.id" :index="String((i+2)+'-'+(t+1))" :route="secNav.path">{{secNav.title}}</el-menu-item>
				</el-submenu>
			</el-menu>
		</el-col>

	</div>
</template>

<script>
	// import { mapState } from 'vuex'
	
	export default {
		//这是轮播图
		name: 'v-horselight',
		data() {
			return {
				mediumList: [
					{id: 1,navName: "首页",path: "/home"},
					{id: 2,navName: "我的资源库",iconFont: "el-icon-caret-right",
						secondNav: [
							{id: 1,title: "我的资源",path: "/medium/personal"},
							{id: 2,title: "软文认领",path: "/medium/softResources"},
							{id: 3,title: "导入记录",path: "/medium/importRecord"},
						]
					},
					{id: 3,navName: "平台订单",iconFont: "el-icon-tickets",
						secondNav: [
							{id: 1,title: "软文订单",path: "/medium/orderPage/0"},
							{id: 2,title: "自媒体订单",path: "/medium/orderPage/1"},
							{id: 3,title: "公众号订单",path: "/medium/orderPage/2"},
							{id: 4,title: "微博订单",path: "/medium/orderPage/3"},
							{id: 5,title: "小红书订单",path: "/medium/orderPage/4"},
							{id: 6,title: "短视频订单",path: "/medium/orderPage/5"},
						]
					},
					{id: 4,navName: "云订单",iconFont: "el-icon-sort",
						secondNav: [
							{id: 1,title: "软文订单",path: "/medium/orderPage/0"},
							{id: 2,title: "自媒体订单",path: "/medium/orderPage/1"},
							{id: 3,title: "公众号订单",path: "/medium/orderPage/2"},
							{id: 4,title: "微博订单",path: "/medium/orderPage/3"},
							{id: 5,title: "小红书订单",path: "/medium/orderPage/4"},
							{id: 6,title: "短视频订单",path: "/medium/orderPage/5"},
						],
					},
					{id: 5,navName: "财务管理",iconFont: "el-icon-sort",
						secondNav: [
							{id: 1,title: "提现申请",path: "/source/file"},
							{id: 2,title: "财务报表",path: "/medium/financialStatements"},
							{id: 3,title: "账户安全",path: "/medium/accountSecurity"}
						],
					}
				],
				navList: [
					{id: 1,navName: "首页",path: "/home"},
					{id: 2,navName: "媒体商城",iconFont: "el-icon-caret-right",
						secondNav: [
							{id: 1,title: "软文资源",path: "/business/article"},
							{id: 2,title: "自媒体",path: "/business/zimeiti"	},
							{id: 3,title: "公众号",path: "/business/weixin"},
							{id: 4,title: "微博",path: "/business/weibo"},
							{id: 5,title: "视频/直播",path: "/business/video"},
							{id: 6,title: "小红书",path: "/business/redbook"},
						]
					},
					{id: 3,navName: "我的订单",iconFont: "el-icon-tickets",
						secondNav: [
							{id: 1,title: "软文订单",path: "/order/article"},
							{id: 2,title: "自媒体订单",path: "/order/zimeiti"},
							{id: 3,title: "公众号订单",path: "/order/weixin"},
							{id: 4,title: "微博订单",path: "/order/weibo"},
							{id: 5,title: "小红书订单",path: "/order/video"},
							{id: 6,title: "短视频订单",path: "/order/redbook"},
						]
					},
					{id: 4,navName: "财务管理",iconFont: "el-icon-sort",
						secondNav: [
							{id: 1,title: "个人充值",path: "/finance/recharge"},
							{id: 2,title: "我的账户",path: "/finance/account"},
							{id: 3,title: "账户安全",path: "/finance/safe"}
						],
					},
					{id: 5,navName: "素材管理",iconFont: "el-icon-sort",
						secondNav: [
							{id: 1,title: "素材列表",path: "/source/file"},
							{id: 2,title: "素材添加",path: "/source/creatfile"}
						],
					}
				],
				
				idType:this.$store.state.identityType,
			}
		},
		// computed: mapState(['defaultActive','identityType']),
		computed: {    
			dVal(){
				//console.log(this.$store.state.defaultActive)
				return this.$store.state.defaultActive.toString();
			},
			iVal() {
				//console.log("identityType horse",this.$store.state.identityType)
				return this.$store.state.identityType;
			},
			openeds(){
				return this.$store.state.defaultOpeneds;
			}
		},
		// mounted(){
		// 	var test  = this.$store.state.defaultActive;
		// },
		methods: {
			handleOpen(key, keyPath) {
				//console.log("打开",key, keyPath);
				this.$store.commit('setDefaultOpeneds',keyPath)
			},
			handleClose(key, keyPath) {
				//console.log(key, keyPath);
			},
			navSelect(key){
				//console.log("选中",key)
				this.$store.commit('setAefaultActive',key)
			}
		},
		mounted: function() {
		},
		props: {
			msg: String,
			// identityType :String,
		}
	}
</script>

<style scoped>
	.el-submenu .el-menu-item{height: 40px;line-height: 40px;}
	.el-menu{border:0}
	.horselight{padding-top: 25px;}
	.horselight-el-col{
		height: 805px;overflow:auto;overflow-x:hidden;overflow-y:auto;background: #fff;
	}
</style>
